<script setup>
  import { toRefs } from 'vue'
  import { useField, useFieldArray } from 'vee-validate'
  import { uniqueId } from '@/helpers/utils'
  import InputLabel from './InputLabel.vue'
  import Checkbox from './Checkbox.vue'

  const props = defineProps({
    name: String,
    label: String,
    modelValue: {
      type: null,
    },
    options: {
      type: Array,
    },
    description: { type: String },
    idKey: { type: String, default: 'id' },
    labelKey: { type: String, default: 'label' },
    editable: { type: Boolean, default: true },
    required: { type: Boolean, default: false },
  })
  const tagId = uniqueId(props.name)
</script>
<template>
  <div class="form-group String">
    <InputLabel :label="label" :required="required" :tagId="tagId"></InputLabel>
    <Checkbox
      v-for="(option, index) in options"
      :key="name + '-' + index"
      :label="option[labelKey]"
      :name="name"
      :value="option[idKey]"
      :editable="editable"
      divCss='checkbox'
    />
    <div class="help-block" v-if="description" v-html="description" />
  </div>
</template>
